<template>
    <div class="personal">
        <div class="user-info clearfix">
            <div class="user-avatar fl">
                <UserAvatar :level="level" :totalLevel="5"/>
            </div>
            <div class="info fl">
                <div class="info-item">
                    <div class="item name-wx">莫失莫忘</div>
                    <div class="item">vip</div>
                </div>
                <div class="info-item">
                    <div class="item">
                        <div class="gold-wrap">
                            <span class="gold-icon"></span>
                            <span class="gold-num">90个</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="gold-wrap">
                            <span class="gold-icon silver-icon"></span>
                            <span class="gold-num">120个</span>
                        </div>
                    </div>
                </div>
                <div class="info-item">
                    <div class="item level-name">顽强青铜Lv.{{level}}</div>
                </div>
            </div>
        </div>
        <div class="balance">
            <div class="fl">
                红包余额：<span class="balance-num">￥0.00</span>
            </div>
            <button class="fr cash-btn">提现</button>
        </div>
    </div>
</template>

<script>
    import UserAvatar from 'components/UserAvatar'
    export default {
        name: "personal",
        components:{
            UserAvatar
        },
        data() {
            return {
                level:0,
                totalLevel:5
            }
        },
        computed:{

        },
        mounted(){
            setTimeout(()=>{
                this.level = 1;
            },1000)
        },
        methods:{

        }
    }
</script>

<style scoped lang="less">

    .balance{
        height: 1rem;
        background-color: #3889da;
        border-radius:0.1rem;
        margin-top: 0.3rem;
        line-height: 1rem;
        font-size: 0.32rem;
        padding: 0 0.3rem;
        color: #FFFFFF;
        .balance-num{
            color: #fef36e;
        }
        .cash-btn{
            height: 0.5rem;
            width: 1.6rem;
            line-height: 1;
            color: #FFFFFF;
            background-color: #ff6202;
            border-radius:0.5rem;
            margin-top: 0.25rem;
            box-shadow:0 2px 1px #4c637e;
        }
    }

    .progress-ring{
        .progress-ring__circle{
            transition:stroke-dashoffset 0.35s;
        }
    }
    .gold-wrap{
        margin-bottom: 0.15rem;
        font-size: 0;
        line-height: 1;
        .gold-icon{
            display: inline-block;
            width: 0.35rem;
            height: 0.35rem;
            background-color: #ff6400;
            border-radius:50%;
            overflow: hidden;
            margin-right: 0.1rem;
            vertical-align: bottom;
            &.silver-icon{
                background-color: #94b7cb;
            }
        }
        .gold-num{
            font-size: 0.3rem;
        }
    }

    .personal{
        width: 100vw;
        height: 100vh;
        background: linear-gradient(#294a9b,#50baf4);
        overflow: hidden;
        padding: 0.25rem 0.35rem;
    }
    .user-info{
        height: 2.7rem;
        padding: 0.35rem 0.45rem;
        background: linear-gradient(#2d57ca,#57acfc);
        border-radius:0.1rem;
        .user-avatar{
            position: relative;
            .level{
                width: 100%;
                height: 0.4rem;
                background-color: #483380;
                position: absolute;
                bottom: 0;
                left: 0;
                text-align: center;
                line-height: 0.35rem;
                color: #FFFFFF;
            }
            .avatar-wrap{
                background-color: #fff;
                position: absolute;
                left: 13px;
                top: 13px;
                height: 74px;
                width: 74px;
                overflow: hidden;
                border-radius:50%;
            }
            circle{
                stroke-width: 8px;
                transform-origin: center;
                &.progress-background{
                    stroke: #FFFFFF;
                    background-color: #fff;
                }
                &.progress-bar{
                    stroke-width: 4px;
                    stroke: #f2b937;
                    transition:stroke-dashoffset 0.35s;
                    transform:rotate(-90deg);
                    stroke-linecap: round;
                }
            }
        }
        .info{
            padding-left: 0.35rem;
            color: #FFFFFF;
            width: 60%;
            float: left;

            .info-item{
                display: flex;
                margin-bottom: 0.2rem;
                .item{
                    flex: 1;
                    font-size: 0.3rem;
                    &.name-wx{
                        text-shadow: 0 3px 2px rgba(36, 36, 36, 0.7);
                    }
                    &.level-name{
                        color: #f2ffb0;
                        font-size: 0.35rem;
                        text-shadow: 0 3px 2px rgba(36, 36, 36, 0.7);

                    }
                }
            }
        }

    }
</style>
